<template>
    <div id='chargeTitle-log'>
        <loading mode="full" v-if="loading"></loading>
        <h1 class="card-title">
            <span>充值记录</span>
            <div class="card-title__button"></div>
        </h1>
        <div class="order-form form-table">
             <div class="form-content">
                <div class="form-item">
                    <div class="form-item__key">放款人</div>
                    <div class="form-item__value">
                        <input type="tel" placeholder="请输入手机号码" v-model='lenders'>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">姓名</div>
                    <div class="form-item__value">
                        <input type="tel" placeholder="请输入姓名" v-model='lendersName'>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">出借状态</div>
                    <div class="form-item__value" >
                            <select v-model="sort" class="sort">
                                <option value="">全部</option>
                                <option value="LIAN_LIAN">连连支付</option>
                                <option value="ALIPAY">支付宝支付</option>
                            </select>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">拓展标签</div>
                    <div class="form-item__value" >
                            <select v-model="sort1" class="sort">
                                <option value="">全部</option>
                                 <option v-for='item in this.allocationJason' :value="item">
                                        {{item}}
                                 </option>          
                            </select>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">支付状态</div>
                    <div class="form-item__value" >
                            <select v-model="sort2" class="sort">
                                <option value="">全部</option>
                                <option value="SUCCESS">支付成功</option>
                                <option value="FAIL">支付失败</option>
                            </select>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">开始时间</div>
                    <div class="form-item__value">
                         <date-picker
                                color='#757575'
                                :placeholder='`选择日期`' v-model='dataTime'></date-picker>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">结束时间</div>
                    <div class="form-item__value">
                         <date-picker
                                color='#757575'
                                :placeholder='`选择日期`' v-model='dataTime1'></date-picker>
                    </div>
                </div>
                <div class="form-item">
                         <div class="form-item__key">排序规则</div>
                         <div class="form-item__value">
                             <select v-model="sort3" class="sort">
                                 <option value="">全部</option>
                                 <option value="1">充值时间由晚到早</option>
                                 <option value="2">点券数由大到小</option>
                                 <option value="3">充值金额由大到小</option>
                             </select>
                        </div>
                 </div>                        
            </div>
            <div  class="form-button"><span class="form-button__item button" @click='findAllRechargeRecord(1)'>搜索</span></div>
         </div>
         <el-table
                            ref="multipleTable"
                            :data="tableData3"
                            border
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <!-- <el-table-column
                            type="selection"
                            >
                            </el-table-column> -->
                            <el-table-column
                            prop="mobile"
                            label="手机"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.mobile'> {{ scope.row.mobile }} </span>
                                   <span v-else>--</span>                
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="realName"
                            label="姓名"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.realName'> {{ scope.row.realName }} </span>
                                   <span v-else>--</span>                
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="receiveAmount"
                            label="点券数"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.receiveAmount'> {{ scope.row.receiveAmount }} </span>
                                   <span v-else>--</span>                
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="amount"
                            label="金额"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.amount'> {{ scope.row.amount |toYuan}} </span>
                                   <span v-else>--</span>                
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="allocationStr"
                            label="拓展标签"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.allocationStr'> {{ scope.row.allocationStr }} </span>
                                   <span v-else>--</span>                
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="payChannel"
                            label="支付方式"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.payChannel'> {{ transAlipayState(scope.row.payChannel) }} </span>
                                   <span v-else>--</span>                
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="state"
                            label="支付状态"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.state'> {{ transAlipay(scope.row.state) }} </span>
                                   <span v-else>--</span>                
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="payTime"
                            label="充值时间"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.payTime'> {{ timestampToDate(scope.row.payTime) }} </span>
                                   <span v-else>--</span>                
                                </template>
                            </el-table-column>
                            <!-- <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button
                                        size="small"
                                        type="text"
                                        >查看</el-button>
                                    </template>
                            </el-table-column>          -->
            </el-table>
            <pagination
                        :current-page='pageNo.pageNum'
                        :total-page='pageNo.totalPage'
                        @pageChange='findAllRechargeRecord'></pagination> 
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import datePicker from '../components/DatePicker.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import toYuan from '../filters/filter-toYuan'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { allApi, lenderApi } from '../api/api'
    import moment from 'moment'
    import echarts from 'echarts'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'


    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            datePicker,
            tabBox,
            tab
        },
        filters:{
            dateFormat,
            toYuan,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        data() {
            return {
                lenders:'',
                lendersName:'',
                sort:'',
                sort1:'',
                sort2:'',
                sort3:'',
                dataTime:'',
                dataTime1:'',
                tableData3:[],
                pageNo:[],
                allocationJason:{},
                loading:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD HH:mm:ss')
            },
            transAlipay(a){
                if(a=='SUCCESS')
                    return '支付成功'               
                if(a=='FAIL')
                    return '支付失败'              
            },
            transAlipayState(a){
                if(a=='LIAN_LIAN')
                    return '连连支付'               
                if(a=='ALIPAY')
                    return '支付宝'              
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
             findAllRechargeRecord(num){
                 this.loading=true
                allApi.findAllRechargeRecord(
                    {
                        mobile:this.lenders,
                        realName:this.lendersName,
                        payChannel:this.sort,
                        allocationStatus:this.sort1,
                        state:this.sort2,
                        startTime:this.dataTime,
                        endTime:this.dataTime1,
                        rank:this.sort3,
                        pageSize:10,
                        pageNum:num
                    }
                )
                .then(result => {
                    console.log('111')
                    this.loading=false
                    this.pageNo=result
                    this.tableData3=result.list
                })
                .catch(error => {
                    console.error(error)
                    this.loading=false
                })
            }, 
            rechargeRecordFindAllAllocationStr(){
                allApi.rechargeRecordFindAllAllocationStr(
                )
                .then(result => {
                    console.log('111')
                    this.allocationJason=result
                })
                .catch(error => {
                    console.error(error)
                })
            }, 
          
          
        },
        created(){
           this.findAllRechargeRecord(1)
           this.rechargeRecordFindAllAllocationStr()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    #chargeTitle-log{
        width:95%;
        .el-button--text {
            color: #13ce66;
        }
    }
</style>
